import React, {useRef} from "react";
import ProForm, {FormInstance, ProFormSelect, ProFormText} from "@ant-design/pro-form"
import {Form, Input, ModalProps} from "antd";
import {ModalPermission} from "@/components/Permission";
import functionService from "@/services/function";
import {FunctionDTO, FunctionVO} from "@/types/function";
import {OptionType} from "@/types/common";
import CustomTreeSelect from "@/components/CustomTreeSelect";

interface FunctionFormProps{
  entity?:FunctionVO;
  options?:OptionType[];
  onFinish?: (formData:any) => Promise<any | void>;
  /** @name 用于触发抽屉打开的 dom */
  trigger?: JSX.Element;
  /** @name 获取真正的可以获得值的 from */
  formRef?: React.MutableRefObject<(FormInstance & {
    getFieldsFormatValue?: () => any;
  }) | undefined>;
  onReset:()=>void;
  functionKey?:string;
  /** @name 打开关闭的事件 */
  onVisibleChange?: (visible: boolean) => void;
  onHide?: () => void;
  /** @name 受控的打开关闭 */
  visible?: ModalProps['visible'];
}

const create= async (params:FunctionDTO): Promise<FunctionVO> => {
  const response=await functionService.create(params);
  const {data}=response;
  return new Promise((resolve, reject) => {
    resolve(data);
  })
}

const modify= async (params:FunctionDTO): Promise<FunctionVO> => {
  const response=await functionService.modify(params);
  const {data}=response;
  return new Promise((resolve, reject) => {
    resolve(data);
  })
}

const FunctionForm:React.FC<FunctionFormProps> = (props) =>{

  const formRef = useRef<FormInstance>();

  const onFinish=async (values:any) => {
    return new Promise<boolean|void>((resolve, reject)=>{
      if(props.onFinish){
        props.onFinish(values)
          .then((data)=>{
            if(data){
              resolve(true);
              props.onReset();
              formRef.current?.resetFields();
            }else{
              reject();
            }
          });
      }
    })
  }

  return (
    <ModalPermission
      formRef={formRef}
      functionKey={props.functionKey}
      visible={props.visible}
      onVisibleChange={props.onVisibleChange}
      trigger={props.trigger}
      onFinish={onFinish}
      initialValues={{
        id:props.entity?.id,
        name:props.entity?.name,
        path:props.entity?.path,
        icon:props.entity?.icon,
        type:props.entity?.type,
        parentId:props.entity?.parentId,
      }}
    >
      <ProForm.Group>
        <ProFormText
          width="md"
          name="name"
          label="功能名称"
          rules={[
            {required:true,message:'请输入功能名称'}
          ]}
          placeholder="请输入功能名称"
        />
        <ProFormText
          width="md"
          name="path"
          label="功能路径"
          rules={[
            {required:true,message:'请输入功能路径'}
          ]}
          placeholder="请输入功能路径"
        />
        <ProFormText
          width="md"
          name="icon"
          label="功能图标"
          placeholder="请输入功能图标"
        />
        <ProFormSelect
          width="md"
          name={'type'}
          label="功能类型"
          rules={[
            {required:true,message:'请选择功能类型'}
          ]}
          options={[
            {value: 'MENU',label: '菜单'},
            {value: 'BUTTON',label: '按钮'},
          ]}
          placeholder="请选择功能类型"
        />
        <Form.Item
          className={'pro-field-md'}
          name={'parentId'}
          label="上级功能"
        >
          <CustomTreeSelect list={props.options} multiple={false}/>
        </Form.Item>
        <Form.Item name="id">
          <Input type={'hidden'} />
        </Form.Item>
      </ProForm.Group>
    </ModalPermission>
  )
}

export const FunctionCreateForm:React.FC<FunctionFormProps> = (props) =>{
  const formRef = useRef<FormInstance>();

  const onVisibleChange=(visible: boolean)=>{
    if(visible){
      formRef.current?.setFieldsValue({
        id:props.entity?.id,
        name:props.entity?.name,
        path:props.entity?.path,
        icon:props.entity?.icon,
        type:props.entity?.type,
        parentId:props.entity?.parentId,
      })
    }
    if(props.onHide && !visible){
      props.onHide();
    }
  }

  return (
    <FunctionForm
      {...props}
      formRef={formRef}
      onFinish={create}
      onVisibleChange={onVisibleChange}
    />
  )
}

export const FunctionModifyForm:React.FC<FunctionFormProps> = (props) =>{
  const formRef = useRef<FormInstance>();

  const onVisibleChange=(visible: boolean)=>{
    if(visible){
      formRef.current?.setFieldsValue({
        id:props.entity?.id,
        name:props.entity?.name,
        path:props.entity?.path,
        icon:props.entity?.icon,
        type:props.entity?.type,
        parentId:props.entity?.parentId,
      })
    }
    if(props.onHide && !visible){
      props.onHide();
    }
  }

  return (
    <FunctionForm
      {...props}
      formRef={formRef}
      onFinish={modify}
      onVisibleChange={onVisibleChange}
    />
  )
}

